import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

import commonService from '@/api/services/commonService';

export default function ArticlePage() {
  const { id } = useParams();

  const [info, setInfo] = useState<any>({});

  const list = [
    { title: '优T介绍', id: '50' },
    { title: '服务条款', id: '51' },
    { title: '隐私条款', id: '52' },
    { title: '法律声明', id: '53' },
    { title: '常见问题', id: '54' },
    { title: '售后服务条款', id: '55' },
    { title: '渠道合作', id: '56' },
    { title: '联系我们', id: '57' },
    { title: '加入我们', id: '58' },
    { title: '工厂合作', id: '59' },
  ];

  useEffect(() => {
    getDetail(id);
  }, []);

  const getDetail = (domainId: any) => {
    commonService.getCustomApi('/common/baseProperty/get', { domainId }).then((res) => {
      setInfo(res);
    });
  };

  return (
    <div className="relative left-[50%] ml-[-712px] mt-[50px] flex w-[1424px] flex-col">
      <div className="flex justify-between">
        <div className="mb-[20px] mr-[96px] flex w-[352px] flex-col gap-[20px]">
          <div className="flex flex-col gap-[10px]">
            {list.map((item: any) => {
              return (
                <div className="cursor-pointer" onClick={() => getDetail(item.id)}>
                  {item.title}
                </div>
              );
            })}
          </div>
        </div>
        <div className="flex-1 flex-col">
          {/** 商品列表 */}
          <div className="flex flex-col flex-wrap gap-[20px]">
            <div className="w-full text-center">{info.title}</div>
            <div dangerouslySetInnerHTML={{ __html: info.detail }} />
          </div>
        </div>
      </div>
    </div>
  );
}
